<script setup lang="ts">
  import { authState } from '@/plugins/constants'
  import { requestSendCode, requestStrongAuth } from '@/service'
  import { useSessionStore } from '@/store/session'
  import { useIntervalFn } from '@vueuse/core'
  import { reactive, ref } from 'vue'
  const emits = defineEmits(['success'])
  const userFormRef = ref()
  const countdown = ref(0)
  const FormData = reactive({
    inpUserPone: '',
    inpPoneCode: '',
  })
  const session = useSessionStore()
  const visible = defineModel('visible')
  const { pause, resume } = useIntervalFn(() => {
    if (countdown.value === 0) {
      pause()
    } else {
      countdown.value--
    }
  }, 1000)
  async function handleSendCode() {
    try {
      await userFormRef.value.validate('inpUserPone')
      const { inpUserPone } = userFormRef.value.getValues()
      requestSendCode({ phoneNum: inpUserPone }).then((result: any) => {
        if (result.code === 0) {
          // 倒计时
          countdown.value = 120
          resume()
        }
      })
    } catch (error) {
      console.log('error', error)
    }
  }
  async function handleSubmit() {
    try {
      await userFormRef.value.validate()
      const { inpUserPone, inpPoneCode } = userFormRef.value.getValues()
      const result: any = await requestStrongAuth({
        phoneNum: inpUserPone,
        smscode: inpPoneCode,
        customerId: session.visitorId,
        configId: session.configId,
      })
      if (result.code === 0) {
        visible.value = false
        session.updateUserPhone(result.data)
        //更新认证状态
        session.updateAuthState(authState.complete)
        // 认证成功
        emits('success')
      }
    } catch (error) {
      console.log('error', error)
    }
  }
</script>

<template>
  <van-dialog class="px-3 pb-2 pt-4" v-model:show="visible">
    <template #default>
      <van-form
        ref="userFormRef"
        :required="false"
        :show-error-message="false"
        @submit="handleSubmit"
      >
        <van-field
          v-model="FormData.inpUserPone"
          name="inpUserPone"
          :rules="[
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误' },
          ]"
          label="手机号"
          placeholder="手机号"
        />
        <van-field
          v-model="FormData.inpPoneCode"
          :rules="[{ required: true, message: '请输入验证码' }]"
          name="inpPoneCode"
          label="验证码"
          placeholder="验证码"
        >
          <template #button>
            <span class="text-primary" @click="handleSendCode">{{
              countdown == 0 ? '发送验证码' : countdown + 's'
            }}</span>
          </template>
        </van-field>
      </van-form>
    </template>
    <template #footer>
      <div class="px-2 py-2 w-full">
        <van-button
          round
          class="w-full bg-primary text-white"
          native-type="submit"
          @click.enter="handleSubmit"
          >确认</van-button
        >
      </div>
    </template>
  </van-dialog>
</template>

<style scoped></style>
